<template>
  <el-col :span="23" :offset="1">
  <el-card>
    <el-table
    :data="tableData"
    style="width: 100%"
    max-height="370">
    <el-table-column
      fixed
      prop="pName"
      label="项目名称"
      width="150">
    </el-table-column>

    <el-table-column
      prop="pProjectStatus"
      label="项目状态"
      width="120"
      :filters="[{text:'已完成',value:'已完成'},{text:'未完成',value:'未完成'}]"
      :filter-method="filterByPro"
    >
    </el-table-column>

    <el-table-column
      prop="pId"
      label="项目编号"
      width="120">
    </el-table-column>

    <el-table-column
      prop="pType"
      label="项目类型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="pCreateDate"
      label="项目创建日期"
      width="120">
    </el-table-column>
<!--      一个完整的表格列如下所示-->
    <el-table-column
      prop="pProgress"
      label="项目进度"
      width="100">
<!--      这里是再表格内部做花样-->
      <template slot-scope="scope">
        <span>{{scope.row.pProgress}}</span>

      </template>
    </el-table-column>
    <el-table-column
      prop="pFileUrl"
      label="项目文件"
      width="120">
      <template slot-scope="scope">
        <div v-if="scope.row.pProjectStatus == '已完成'">
          <el-link :href="scope.row.pFileUrl" target="_blank">点击下载</el-link>
        </div>
        <div v-else>
          <el-link :href="scope.row.pFileUrl" target="_blank" disabled>未完成，无法下载</el-link>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="pModelManagerId"
      label="模型主管"
      width="120">
      <template slot-scope="scope">
        <el-tooltip :content="'tel:'+scope.row.pModelManagerId.tel" placement="top">
          <el-button type="text">
           {{scope.row.pModelManagerId.name}}
          </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      prop="pRenderManagerId"
      label="渲染主管"
      width="120">
      <template slot-scope="scope">
        <el-tooltip :content="'tel:'+scope.row.pRenderManagerId.tel" placement="top">
          <el-button type="text">
            {{scope.row.pRenderManagerId.name}}
          </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      prop="pAfterManagerId"
      label="后期主管"
      width="120">
      <template slot-scope="scope">
        <el-tooltip :content="'tel:'+scope.row.pAfterManagerId.tel" placement="top">
          <el-button type="text">
            {{scope.row.pAfterManagerId.name}}
          </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
<!--    <el-table-column-->
<!--      fixed="right"-->
<!--      label="操作"-->
<!--      width="120">-->
<!--      <template slot-scope="scope">-->
<!--        <el-button-->
<!--          @click.native.prevent="deleteRow(scope.$index, tableData)"-->
<!--          type="text"-->
<!--          size="small">-->
<!--          移除-->
<!--        </el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>
  </el-card>
  </el-col>
</template>

<script>
  import Global from '../../utils/global'


  var period2progressMap = ['创建成功','建模结束','渲染结束','后期结束','验收结束']
  var statusMap = ['已完成','暂停','终止','进行中']
//阶段状态到阶段名称的映射表         //写错了
  export default {
    name: 'Projects4Client',
    data(){
      return {
        glo:new Global,
        tableData: [
          {pName:'重庆交通大学热水器改造计划',
          pId:'10085',
          pProjectStatus:'未完成',
          pType:'教育项目',
          pCreateDate:new Date(2020,5,5).toDateString(),
          pProgress:'渲染中',
          pFileUrl:'https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_Pclogo_6ysd4c7a&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pc',
          pModelManagerId:
            {
              name:'李二狗',
              tel:'15588994783'
            },
          pRenderManagerId:
            {
              name:'李二狗',
              tel:'15588994783'
            },
          pAfterManagerId:
            {
              name:'李二狗',
              tel:'15588994783'
            }
          }
        ]
      }
    },
    methods: {
      filterByPro(value, row, column){
        const property = column['property'];
        return row[property] === value;
      },
      inserTable (line) {
          this.tableData.push(
            {
              pName: line.pName,
              pId:line.pId,
              pProjectStatus:statusMap[line.pProjectStatus],
              pType:line.pType,
              pCreateDate:line.pCreateDate,
              pProgress:period2progressMap[line.pPeriodStatus],
              pFileUrl:line.pFileUrl,
              pModelManagerId:
                {
                  name:line.pModelManagerId,
                  tel:'14730891105'
                },
              pRenderManagerId:
                {
                  name:line.pRenderManagerId,
                  tel:'14730891105'
                },
              pAfterManagerId:
                {
                  name:line.pAfterManagerId,
                  tel:'14730891105'
                }
            }
          )
        },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      initProjectPage (res) {
        if (1){//可能还需要判断是否获取成功

        }
        console.log(res.data.projectList)

        for (var line in res.data.projectList){
          this.inserTable(res.data.projectList[line])
        }
        console.log(this.tableData)

      }

    },
    mounted () {
      let data = {
        cId:JSON.parse(sessionStorage.getItem('ClientInfo')).cId
      }
      this.glo.sendDate(this.glo.server+'client/GetProject',data,this.initProjectPage)
    },

  }
</script>

<style scoped>

</style>
